
<script setup lang="ts">
const nuxtApp = useNuxtApp()
// const nuxtApp = tryUseNuxtApp() // 它在不可用时将返回 null，而不是引发异常

nuxtApp.hook('app:created', () => {
  console.log('app:created') 
})
nuxtApp.hook('app:mounted', () => {
  console.log('app:mounted') 
})

const resHook = ref()

nuxtApp.hook('app:user:registered', payload => {
  console.log('有新用户注册！', payload)
  resHook.value = payload
})
</script>

<template>
  <div>
    hook:{{ resHook }}
    <UButton
      @click="() => {
        nuxtApp.callHook('app:user:registered', { id: 1, name: 'John Doe' })
      }"
    >
      点击调用Hook事件
    </UButton>
  </div>
</template>

<style scoped>

</style>